<template>
  <div style="width: 100%;height: 100%;">
    <iframe :src="src" :style="{width: width, height:height}" frameborder="0" id="iframe" allow="microphone;camera;midi;encrypted-media;"></iframe>
  </div>
<!--  <div>-->
<!--  <div class="videodome">-->
<!--    <div>-->
<!--      <video id="videoCamera" width="250" height="250" autoplay-->
<!--             style="border-radius:180px;box-shadow: darkgrey 0 0  30px 5px ;"></video>-->
<!--    </div>-->
<!--    <canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>-->
<!--  </div>-->
<!--  <div class="img_bg_camera">-->
<!--    <p style="color: #000000;">图片显示</p>-->
<!--    <img :src="imgSrc" alt="" class="tx_img" style="border-radius:360px;box-shadow: darkgrey 0 0  30px 5px ;" v-if="imgif">-->
<!--  </div>-->
<!--  <div class="bommen">-->
<!--    <el-button type="success" @click="getCompetence()">打开摄像头</el-button>-->
<!--    <el-button type="success" @click="setImage()">拍照</el-button>-->
<!--    <el-button type="primary" @click="openFullScreen1" >提交-->
<!--&lt;!&ndash;      v-loading.fullscreen.lock="fullscreenLoading"&ndash;&gt;-->
<!--    </el-button>-->
<!--  </div>-->
<!--  </div>-->
</template>

<script>
export default {
  name: "registerFace",
  data() {
    return {
      src: '',
      height: window.innerHeight + 'px',//自适应当前窗口高度
      width: '100%'//自适应当前窗口宽度
    }
  },
  mounted() {
    console.log(location.hash)
    this.src = '../../registerFace.html';
  }
}
// export default{
//   data(){
//     return{
//       imgif:false,
//       videoWidth: 250,
//       videoHeight: 250,
//       imgSrc: '',
//       thisCancas: null,
//       thisContext: null,
//       thisVideo: null,
//       imga: '',
//     }
//   },
//   methods:{
//     getCompetence() {
//
//       var _this = this
//       this.thisCancas = document.getElementById('canvasCamera')
//       this.thisContext = this.thisCancas.getContext('2d')
//       this.thisVideo = document.getElementById('videoCamera')
//       // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
//       if (navigator.mediaDevices === undefined) {
//         navigator.mediaDevices = {}
//       }
//       // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
//       // 使用getUserMedia，因为它会覆盖现有的属性。
//       // 这里，如果缺少getUserMedia属性，就添加它。
//       if (navigator.mediaDevices.getUserMedia === undefined) {
//         navigator.mediaDevices.getUserMedia = function(constraints) {
//           // 首先获取现存的getUserMedia(如果存在)
//           var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator
//               .getUserMedia
//           // 有些浏览器不支持，会返回错误信息
//           // 保持接口一致
//           if (!getUserMedia) {
//             return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
//           }
//           // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
//           return new Promise(function(resolve, reject) {
//             getUserMedia.call(navigator, constraints, resolve, reject)
//           })
//         }
//       }
//       var constraints = {
//         audio: false,
//         video: {
//           width: this.videoWidth,
//           height: this.videoHeight,
//           transform: 'scaleX(-1)'
//         }
//       }
//       navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
//         // 旧的浏览器可能没有srcObject
//         if ('srcObject' in _this.thisVideo) {
//           _this.thisVideo.srcObject = stream
//
//         } else {
//           // 避免在新的浏览器中使用它，因为它正在被弃用。
//           _this.thisVideo.src = window.URL.createObjectURL(stream)
//         }
//         // eslint-disable-next-line no-unused-vars
//         _this.thisVideo.onloadedmetadata = function(e) {
//           _this.thisVideo.play()
//         }
//
//       }).catch(err => {
//         console.log(err+"=======>")
//       })
//     },
//     //  绘制图片（拍照功能）
//
//     setImage() {
//       this.imgif=true
//       var _this = this
//       // 点击，canvas画图
//       _this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250)
//       console.log(_this.thisContext);
//
//       // 获取图片base64链接
//       var image = this.thisCancas.toDataURL('image/png')
//       _this.imgSrc = image
//       window.sessionStorage.setItem("img", _this.imgSrc)
//
//       console.log(this.imgSrc);
//
//     },
//
// //关闭摄像头并上传数据
//     openFullScreen1() {
//       this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
//
//           setTimeout(() => {
//             // var file = this.imga.substr(22)
//             this.imga = window.sessionStorage.getItem("img")
//             var file = this.imga
//             console.log(file);
//             var blob = dataURItoBlob(file);  // 上一步中的函数
//             var fd = new FormData(document.forms[0]);
//             fd.append("the_file", blob, 'image.png');
//             //base64数据放formData里面
//             var formData = new FormData(); //*
//             formData.append("multipartFile", file); //*
//             // formData.append("password", this.ruleForm.password); //*
//             // formData.append("username", this.ruleForm.name); //*
//             //自己配置axios。
//             this.$http.post('/backstage/faceRecognition/registerFace', file).then(res => {
//               console.log(res);
//
//             })
//           }, 5000);
//     },
//   }
//
// }
</script>
